<template>
    <div>
        <!-- 标签栏 -->
        <van-tabbar v-model="active" >
            <van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="(item.to)" :icon="(item.icon)">
                <span>{{item.title}}</span>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "GoodsManagerIndex",
          to:"/GoodsManager/GoodsManagerIndex",
          title: "商品",
          icon:"shop-o"
        },
        {
          name: "CartManagerIndex",
          to:"/CartManager/CartManagerIndex",
          title: "购物车",
          icon:"cart-o"
        },
        {
          name: "OrderManagerIndex",
          to:"/OrderManager/OrderManagerIndex",
          title: "订单",
          icon:"orders-o"
        },
        {
          name: "StaffManagerIndex",
          to:"/StaffManager/StaffManagerIndex",
          title: "我的",
          icon:"user-o"
        }
      ],
    };
  },
  methods: {},
  //通过路由跳转判断选中的样式
  created() {
      for( var i=0;i<this.tabbars.length;i++){
          if(this.$route.name == this.tabbars[i].name){
              this.active=i;
          }
      }
  }
}
</script>